﻿<template>
  <div v-if="show">
    <el-dialog v-drag
      title="事件设置"
      :append-to-body="true"
      :closeOnClickModal="false"
      :visible.sync="settingsShow_api"
      width="50%"
      class="pop"
      :before-close="handleApiClose">
      <label class="tips">提示:请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“事件词典表”</label>
      <el-form>
        <el-form-item label="提交前须进行页面校验" v-if="otherOptions.showValidPage">
          <el-switch v-model="cur_action.data.isValidPage"></el-switch>
        </el-form-item>
        <el-form-item label="执行完成后刷新页面">
          <el-switch v-model="cur_action.data.refreshPage"
            active-text="刷新"
            inactive-text="不刷新"
            ></el-switch>
        </el-form-item>
        <el-form-item label="执行完成后刷新父页面">
          <el-switch v-model="cur_action.data.refreshParentPage"
            active-text="刷新"
            inactive-text="不刷新"
            ></el-switch>
        </el-form-item>
        <el-form-item label="执行完成后执行Load">
          <el-switch v-model="cur_action.data.isLoad"
            active-text="加载"
            inactive-text="不加载"
            ></el-switch>
        </el-form-item>
        <el-form-item label="执行完成后执行文件下载">
          <el-switch v-model="cur_action.data.isDownload"
            active-text="下载"
            inactive-text="不下载"
            @change="changeIsDownLoad"
            ></el-switch>
        </el-form-item>
        <el-form v-if="cur_action.data.isDownload">
          <el-form-item label="下载方式">
            <el-select v-model="cur_action.data.dlType" filterable clearable placeholder="请选择">
              <el-option
                v-for="(item, index) in dlType_options"
                :key="index"
                :label="item.text"
                :value="item.code">
                  <span style="float: left">{{ item.text }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="cur_action.data.isDownload">
            <label class="tips">提示:以下属性设定中，需要设定responseData中对应的属性名称，比如返回结构如下：<br>
            {{JSON.stringify({
              code:'success-成功，failed-失败',
              msg:'提示信息',
              filetype:'文件的content-type类型',
              filename:'文件名称',
              filelength:'文件长度',
              file:'文件内容，采用base64加密'
            })}}<br>
            那“属性设定-文件名称”对应的属性即为filename，如果返回结构如下：<br>
            {{JSON.stringify({
              code:'success-成功，failed-失败',
              msg:'提示信息',
              data: {
                filetype:'文件的content-type类型',
                filename:'文件名称',
                filelength:'文件长度',
                file:'文件内容，采用base64加密'
              }
            })}}<br>
            那“属性设定-文件名称”对应的属性即为data.filename，如果返回结构如下：<br>
            </label>
          </el-form-item>
          <el-form-item label="属性设定-文件名称">
              <el-input v-model="cur_action.data.dl_file_name"></el-input>
            </el-form-item>
          <template v-if="cur_action.data.dlType==='base64'">
            <el-form-item label="属性设定-文件类型">
              <el-input v-model="cur_action.data.dl_file_type"></el-input>
            </el-form-item>
            <el-form-item label="属性设定-文件大小">
              <el-input v-model="cur_action.data.dl_file_length"></el-input>
            </el-form-item>
            <el-form-item label="属性设定-文件内容">
              <el-input v-model="cur_action.data.dl_file_content"></el-input>
            </el-form-item>
          </template>
          <template v-if="cur_action.data.dlType==='binary'">
            <el-form-item label="属性设定-下载链接">
              <el-input v-model="cur_action.data.dl_file_link"></el-input>
            </el-form-item>
          </template>
        </el-form>
        <el-form-item label="事件" v-if="showAPI">
          <el-select v-model="cur_action.data.api" filterable clearable placeholder="请选择" @change="changAPI">
            <el-option
              v-for="(item, index) in api_events"
              :key="index"
              :label="item.name"
              :value="item.no">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.no }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="cur_action.data.url" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="Method">
          <el-input v-model="cur_action.data.method" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="Header">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_header')">添加</el-button>
          </div>
          <el-table :data = 'cur_action.data.input_header' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'key' label = 'Key'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'value' label = 'Value'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_header')" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="Path">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_path')">添加</el-button>
          </div>
          <el-table :data = 'cur_action.data.input_path' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'key' label = 'Key'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'value' label = 'Value'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_path')" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="QueryString">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_querystring')">添加</el-button>
          </div>
          <el-table :data = 'cur_action.data.input_querystring' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'key' label = 'Key'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'value' label = 'Value'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_querystring')" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="PostData">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('input_postdata')">添加</el-button>
          </div>
          <el-table :data = 'cur_action.data.input_postdata' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'key' label = 'Key'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'value' label = 'Value'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'input_postdata')" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="事件响应词典表">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addActionInput('output_dic')">添加</el-button>
          </div>
          <el-table :data = 'cur_action.data.output_dic' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'key' label = 'Key'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.key"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'value' label = 'Value'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.value"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "50">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleInputRemove(scope.$index, 'output_dic')" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickAPIAction">确定</el-button>
          <el-button type="info" @click="handleApiClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
     <el-dialog v-drag
      title="页面设置"
      :append-to-body="true"
      :closeOnClickModal="false"
      :visible.sync="settingsShow_page"
      width="50%"
      class="pop"
      :before-close="handleShowPageClose">
      <el-form>
        <el-form-item label="内部页面">
          <el-switch v-model="cur_action.data.is_innerPage"></el-switch>
        </el-form-item>
        <el-form-item label="目标页面" v-if="cur_action.data.is_innerPage">
          <el-select v-model="cur_action.data.dform_uid" filterable clearable placeholder="请选择" @change="changInnerPage">
            <el-option
              v-for="(item, index) in inner_pages"
              :key="index"
              :label="item.name"
              :value="item.uid">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.category }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标连接">
          <el-input v-model="cur_action.data.target_url"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickPageAction">确定</el-button>
          <el-button type="info" @click="handleShowPageClose">取消</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>
     <el-dialog v-drag
      title="页面设置"
      :append-to-body="true"
      :closeOnClickModal="false"
      :visible.sync="settingsShow_script"
      width="50%"
      class="pop"
      :before-close="handleShowScriptClose">
      <el-form label-position="top">
        <label class="tips">提示:请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“动态页面”下的“脚本说明”<br>
        以下说明仅作参考(如有变动，请以知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中相关说明为准):<br>
        当前登录用户信息请使用loginInfo，结构为<br>
        {<br>
          userName: '用户姓名',<br>
          userUid: '用户UID',<br>
          userType: '用户类型',<br>
          userNo: '用户的业务资料PK',<br>
          roleNo: '用户角色编号，多个逗号分隔',<br>
          loginId: '登录账户'<br>
        }</label>
        <el-form-item label="执行脚本">
          <div id='editorId' ref='myEditor' style="height:500px;"></div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickScriptAction">确定</el-button>
          <el-button type="info" @click="handleShowScriptClose">取消</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>
     <el-dialog v-drag
      title="逻辑操作设置"
      :append-to-body="true"
      :closeOnClickModal="false"
      :visible.sync="settingsShow_logicOperation"
      width="50%"
      class="pop"
      :before-close="handleShowScriptClose">
      <label class="tips">提示:请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“事件词典表”</label>
      <el-form label-position="top">
        <el-form-item label="执行完成后刷新页面">
          <el-switch v-model="cur_action.data.refreshPage"
          active-text="刷新"
          inactive-text="不刷新"
          ></el-switch>
        </el-form-item>
        <el-form-item label="执行完成后刷新父页面">
          <el-switch v-model="cur_action.data.refreshParentPage"
            active-text="刷新"
            inactive-text="不刷新"
            ></el-switch>
        </el-form-item>
         <el-form-item label="执行完成后执行Load">
          <el-switch v-model="cur_action.data.isLoad"
            active-text="加载"
            inactive-text="不加载"
            ></el-switch>
        </el-form-item>
        <el-form-item label="元数据">
          <el-select v-model="cur_action.data.meta_uid" clearable placeholder="请选择" @change="changeMeta">
            <el-option
              v-for="(item, index) in metaList"
              :key="index"
              :label="item.metadesc"
              :value="item.metauid">
              <span style="float: left">{{ item.metadesc }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条件表达式" v-if="cur_action.data.fixed_filter">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedFilterAction()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.fixed_filter' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'op' label = '条件'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.op" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in filter_op"
                      :key="index"
                      :label="item.text"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'value' label = 'Value'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleFixedFilterRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="固定更新的数据" v-if="cur_action.data.fixed_data">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedDataAction()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.fixed_data' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'value' label = 'Value'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleFixedDataRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickLogicOperationAction">确定</el-button>
          <el-button type="info" @click="handleShowLogicOperationClose">取消</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>
     <el-dialog v-drag
      title="导出操作设置"
      :append-to-body="true"
      :closeOnClickModal="false"
      :visible.sync="settingsShow_export"
      width="50%"
      class="pop"
      :before-close="handleShowScriptClose">
      <label class="tips">提示:请参考知识库中的<a target="_blank" href="http://fjkb.whfjwl.com/mdShow.html?defaultPk=%7B%22defaultPk%22%3A%224c83f52d-e6c4-4d85-a143-507a852399ca%22%2C%22version%22%3A%221.0.0%22%7D">【ICP前端框架新版设计】</a>中的“事件词典表”</label>
      <el-form label-position="top">
        <el-form-item label="元数据">
          <el-select v-model="cur_action.data.meta_uid" clearable placeholder="请选择" @change="changeMeta">
            <el-option
              v-for="(item, index) in metaList"
              :key="index"
              :label="item.metadesc"
              :value="item.metauid">
              <span style="float: left">{{ item.metadesc }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导出栏位" v-if="cur_action.data.query_columns">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addQueryColumns()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.query_columns' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择" @change="changeExportColumn(scope.row)">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'header' label = '表头名称'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.header" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'is_active' label = '是否启用'>
                <template slot-scope="scope">
                  <el-switch
                    style="padding:0 0 5px 0"
                    v-model="scope.row.is_active"
                    active-text="启用"
                    inactive-text="停用">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleQueryColumnsRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="合计栏位" v-if="cur_action.data.summary_columns">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addSummaryColumns()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.summary_columns' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'is_active' label = '是否启用'>
                <template slot-scope="scope">
                  <el-switch
                    style="padding:0 0 5px 0"
                    v-model="scope.row.is_active"
                    active-text="启用"
                    inactive-text="停用">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleSummaryColumnsRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="合计条件表达式" v-if="cur_action.data.summary_filter">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addSummaryFilterAction()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.summary_filter' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'op' label = '条件'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.op" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in filter_op"
                      :key="index"
                      :label="item.text"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'value' label = 'Value'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleSummaryFilterRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="条件表达式" v-if="cur_action.data.fixed_filter">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedFilterAction()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.fixed_filter' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'op' label = '条件'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.op" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in filter_op"
                      :key="index"
                      :label="item.text"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'value' label = 'Value'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleFixedFilterRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="其它查询条件" v-if="cur_action.data.other_condition">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addOtherConditionAction()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.other_condition' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in metaColumns"
                      :key="index"
                      :label="item.column_desc"
                      :value="item.column_name">
                      <span style="float: left">{{ item.column_desc }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'op' label = '条件'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.op" clearable placeholder="请选择">
                    <el-option
                      v-for="(item, index) in filter_op"
                      :key="index"
                      :label="item.text"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'value' label = 'Value'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button v-if="!scope.row.isDefault" type = "text" size = "mini" @click = "handleOtherConditionRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="默认排序" v-if="cur_action.data.fixed_orderby">
          <div class="clearfix">
            <el-button style="float: right; padding: 3px 0" type="text" @click="addFixedOrder()">添加</el-button>
          </div>
          <div>
            <el-table :data = 'cur_action.data.fixed_orderby' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
              <el-table-column align = "center" prop = 'key' label = 'Key'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.key" clearable placeholder="请选择">
                    <el-option
                      v-for="(item,index) in metaColumns"
                      :key="index"
                      :label="item.label"
                      :value="item.name">
                      <span style="float: left">{{ item.label }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'order' label = '排序'>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.order" clearable placeholder="请选择">
                    <el-option label="升序" value="asc"></el-option>
                    <el-option label="降序" value="desc"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column width="auto" align="center" label="操作">
                <template slot-scope = "scope">
                  <el-button type = "text" size = "mini" @click = "handleFixedOrderRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clickExportAction">确定</el-button>
          <el-button type="info" @click="handleShowExportClose">取消</el-button>
        </el-form-item>
      </el-form>
     </el-dialog>
  </div>
</template>
<script>
import {deepCopy} from '../commonUse'
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
import 'ace-builds/src-noconflict/mode-javascript' // 默认设置的语言模式
export default {
  props: ['show', 'actionName', 'actionSetting', 'otherArgs', 'otherOptions'],
  data () {
    return {
      settingsShow_api: false,
      settingsShow_page: false,
      settingsShow_script: false,
      settingsShow_logicOperation: false,
      settingsShow_export: false,
      editor: null,
      showAPI: true,
      api_events: [],
      inner_pages: [],
      cur_action: {
        data: {}
      },
      fixed_data: [],
      metaList: [],
      metaColumns: [],
      metaUID: '',
      filter_op: [{
        code: '$eq',
        text: '='
      }, {
        code: '$neq',
        text: '!='
      }, {
        code: '$gt',
        text: '>'
      }, {
        code: '$gte',
        text: '>='
      }, {
        code: '$lt',
        text: '<'
      }, {
        code: '$lte',
        text: '<='
      }, {
        code: '$like',
        text: 'like'
      }, {
        code: '$in',
        text: 'in'
      }],
      dlType_options: [{
        code: 'base64',
        text: 'base64'
      }, {
        code: 'binary',
        text: '下载链接'
      }]
    }
  },
  watch: {
    show: {
      handler: function (val, oldVal) {
        if (val) {
          this.init()
        }
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    addActionInput (filed_name) {
      if (!this.cur_action.data[filed_name]) this.cur_action.data[filed_name] = []
      this.$set(this.cur_action.data[filed_name], this.cur_action.data[filed_name].length, {
        key: '',
        value: ''
      })
    },
    addFixedDataAction () {
      this.cur_action.data.fixed_data.push({
        key: '',
        value: ''
      })
    },
    addFixedFilterAction () {
      this.cur_action.data.fixed_filter.push({
        key: '',
        op: '',
        value: ''
      })
    },
    addSummaryFilterAction () {
      this.cur_action.data.summary_filter.push({
        key: '',
        op: '',
        value: ''
      })
    },
    addOtherConditionAction () {
      this.cur_action.data.other_condition.push({
        key: '',
        op: '',
        value: ''
      })
    },
    addFixedOrder () {
      this.cur_action.data.fixed_orderby.push({
        key: '',
        order: 'asc'
      })
    },
    addQueryColumns () {
      this.cur_action.data.query_columns.push({
        key: '',
        header: '',
        is_active: true
      })
    },
    addSummaryColumns () {
      this.cur_action.data.summary_columns.push({
        key: '',
        is_active: true
      })
    },
    handleInputRemove (index, filed_name) {
      this.cur_action.data[filed_name].splice(index, 1)
    },
    handleFixedDataRemove (index) {
      this.cur_action.data.fixed_data.splice(index, 1)
    },
    handleFixedFilterRemove (index) {
      this.cur_action.data.fixed_filter.splice(index, 1)
    },
    handleOtherConditionRemove (index) {
      this.cur_action.data.other_condition.splice(index, 1)
    },
    handleFixedOrderRemove (index) {
      this.cur_action.data.fixed_orderby.splice(index, 1)
    },
    handleSummaryFilterRemove (index) {
      this.cur_action.data.summary_filter.splice(index, 1)
    },
    handleQueryColumnsRemove (index) {
      this.cur_action.data.query_columns.splice(index, 1)
    },
    handleSummaryColumnsRemove (index) {
      this.cur_action.data.summary_columns.splice(index, 1)
    },
    init () {
      if (this.actionName === 'api' || this.actionName === 'outer_api') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          isValidPage: false,
          refreshPage: false,
          refreshParentPage: false,
          isLoad: false,
          isDownload: false,
          dlType: 'base64',
          dl_file_name: 'filename',
          dl_file_type: 'filetype',
          dl_file_length: 'filelength',
          dl_file_content: 'file',
          dl_file_link: 'file',
          api: '',
          method: '',
          url: '',
          input_header: [],
          input_path: [],
          input_querystring: [],
          input_postdata: [],
          output_dic: []
        }

        this.$set(this.cur_action, 'data', settings)
        this.$set(this.cur_action.data, 'input_header', settings.input_header)
        this.$set(this.cur_action.data, 'input_path', settings.input_path)
        this.$set(this.cur_action.data, 'input_querystring', settings.input_querystring)
        this.$set(this.cur_action.data, 'input_postdata', settings.input_postdata)
        if (!this.api_events || this.api_events.length <= 0) {
          this.api_events = this.$store.state.commonData.apiEvents
        }
        if (this.actionName === 'api') {
          this.showAPI = true
        } else {
          this.showAPI = false
        }
        this.settingsShow_api = true
      } else if (this.actionName === 'pop' || this.actionName === 'redirect') {
        let settings = this.actionSetting ? this.actionSetting : {
          target_url: '',
          dform_uid: '',
          is_innerPage: true
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.inner_pages || this.inner_pages.length <= 0) {
          this.$api.query('/d_form?type=normal_v2').then(data => {
            this.inner_pages = []
            data.forEach((v, i) => {
              this.inner_pages.push({
                uid: v.uid,
                name: v.name,
                category: v.category
              })
            })
          })
        }
        if (this.cur_action.data.is_innerPage) {
          this.showInnerPage = true
        } else {
          this.showInnerPage = false
        }
        this.settingsShow_page = true
      } else if (this.actionName === 'script') {
        let settings = this.actionSetting ? this.actionSetting : {
          script: ''
        }
        this.$set(this.cur_action, 'data', settings)
        this.settingsShow_script = true
        let self = this
        this.$nextTick(() => {
          self.editor = ace.edit(self.$refs.myEditor, {
            fontSize: 14,
            tabSize: 4,
            theme: 'ace/theme/monokai',
            mode: 'ace/mode/javascript',
            enableSnippets: true,
            enableLiveAutocompletion: true,
            enableBasicAutocompletion: true,
            value: self.cur_action.data.script
          })
        })
      } else if (this.actionName === 'metaRemove' ||
      this.actionName === 'metaActive' ||
      this.actionName === 'metaDeactive' ||
      this.actionName === 'metaSubmit' ||
      this.actionName === 'metaPass' ||
      this.actionName === 'metaReject' ||
      this.actionName === 'metaFinish' ||
      this.actionName === 'metaStop') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          meta_uid: '',
          refreshPage: false,
          refreshParentPage: false,
          isLoad: false,
          fixed_data: [],
          fixed_filter: []
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.metaList || this.metaList.length <= 0) {
          this.metaList = this.$store.state.commonData.metaList_inc_fc
        }
        if (this.otherArgs && this.otherArgs.meta_uid) {
          this.cur_action.data.meta_uid = this.otherArgs.meta_uid
        }
        this.changeMeta()
        this.settingsShow_logicOperation = true
      } else if (this.actionName === 'metaUpdate') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          meta_uid: '',
          refreshPage: false,
          refreshParentPage: false,
          isLoad: false,
          fixed_data: []
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.metaList || this.metaList.length <= 0) {
          this.metaList = this.$store.state.commonData.metaList_inc_fc
        }
        if (this.otherArgs && this.otherArgs.meta_uid) {
          this.cur_action.data.meta_uid = this.otherArgs.meta_uid
        }
        this.changeMeta()
        this.settingsShow_logicOperation = true
      } else if (this.actionName === 'metaAdd') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          refreshPage: false,
          refreshParentPage: false,
          isLoad: false,
          meta_uid: ''
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.metaList || this.metaList.length <= 0) {
          this.metaList = this.$store.state.commonData.metaList_inc_fc
        }
        if (this.otherArgs && this.otherArgs.meta_uid) {
          this.cur_action.data.meta_uid = this.otherArgs.meta_uid
        }
        this.changeMeta()
        this.settingsShow_logicOperation = true
      } else if (this.actionName === 'metaDelete') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          refreshPage: false,
          refreshParentPage: false,
          isLoad: false,
          meta_uid: ''
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.metaList || this.metaList.length <= 0) {
          this.metaList = this.$store.state.commonData.metaList_inc_fc
        }
        if (this.otherArgs && this.otherArgs.meta_uid) {
          this.cur_action.data.meta_uid = this.otherArgs.meta_uid
        }
        this.changeMeta()
        this.settingsShow_logicOperation = true
      } else if (this.actionName === 'metaSave') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          refreshPage: false,
          refreshParentPage: false,
          isLoad: false,
          meta_uid: '',
          fixed_data: []
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.metaList || this.metaList.length <= 0) {
          this.metaList = this.$store.state.commonData.metaList_inc_fc
        }
        if (this.otherArgs && this.otherArgs.meta_uid) {
          this.cur_action.data.meta_uid = this.otherArgs.meta_uid
        }
        this.changeMeta()
        this.settingsShow_logicOperation = true
      } else if (this.actionName === 'metaExport') {
        let settings = this.actionSetting && Object.keys(this.actionSetting).length > 0 ? this.actionSetting : {
          meta_uid: '',
          fixed_filter: [],
          other_condition: [],
          fixed_orderby: [],
          query_columns: [],
          summary_columns: [],
          summary_filter: []
        }
        this.$set(this.cur_action, 'data', settings)
        if (!this.metaList || this.metaList.length <= 0) {
          this.metaList = this.$store.state.commonData.metaList_inc_fc
        }
        if (this.otherArgs && this.otherArgs.meta_uid) {
          this.cur_action.data.meta_uid = this.otherArgs.meta_uid
        }
        this.changeMeta()
        this.settingsShow_export = true
      } else {
        this.$emit('onCancel')
      }
    },
    handleActionRemove (category, index) {
      this.events[category].actions.splice(index, 1)
    },
    handleApiClose () {
      this.settingsShow_api = false
      this.$emit('onCancel')
    },
    handleShowPageClose () {
      this.settingsShow_page = false
      this.$emit('onCancel')
    },
    handleShowScriptClose () {
      this.settingsShow_script = false
      if (this.editor) {
        this.editor.destroy()
        this.editor = null
      }
      this.$emit('onCancel')
    },
    handleShowLogicOperationClose () {
      this.settingsShow_logicOperation = false
      this.$emit('onCancel')
    },
    handleShowExportClose () {
      this.settingsShow_export = false
      this.$emit('onCancel')
    },
    changAPI () {
      let self = this
      let list = this.api_events.filter((item, index) => {
        return item.no === self.cur_action.data.api
      })
      this.cur_action.data.input_header = []
      this.cur_action.data.input_path = []
      this.cur_action.data.input_querystring = []
      this.cur_action.data.input_postdata = []
      if (list.length > 0) {
        let p = JSON.parse(list[0].request_parameters)
        this.cur_action.data.url = p.RequestUrl
        this.cur_action.data.method = p.RequestMethod
        if (p.RequestHeader) {
          Object.keys(p.RequestHeader).forEach((item, index) => {
            this.cur_action.data.input_header.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestPath) {
          Object.keys(p.RequestPath).forEach((item, index) => {
            this.cur_action.data.input_path.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestQueryString) {
          Object.keys(p.RequestQueryString).forEach((item, index) => {
            this.cur_action.data.input_querystring.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
        if (p.RequestPostData) {
          Object.keys(p.RequestPostData).forEach((item, index) => {
            this.cur_action.data.input_postdata.push({
              key: item,
              value: self.getValueByKey(item)
            })
          })
        }
      }
    },
    changInnerPage () {
      this.cur_action.data.target_url = '/dashboard/dynamicMenu_v2?uid=' + this.cur_action.data.dform_uid
    },
    changeMeta () {
      let metainfo = this.metaList.find(item => {
        return item.metauid === this.cur_action.data.meta_uid
      })
      if (metainfo) {
        this.metaColumns = metainfo.columns
      }
    },
    changeExportColumn (row) {
      if (row.key) {
        let column = this.metaColumns.find(item => {
          return item.column_name === row.key
        })
        if (column) {
          row.header = column.column_desc
        }
      }
    },
    changeIsDownLoad () {
      if (this.cur_action.data.isDownload) {
        if (!this.cur_action.data.dlType) this.cur_action.data.dlType = 'base64'
        if (!this.cur_action.data.dl_file_name) this.cur_action.data.dl_file_name = 'filename'
        if (!this.cur_action.data.dl_file_type) this.cur_action.data.dl_file_type = 'filetype'
        if (!this.cur_action.data.dl_file_length) this.cur_action.data.dl_file_length = 'filelength'
        if (!this.cur_action.data.dl_file_content) this.cur_action.data.dl_file_content = 'file'
        if (!this.cur_action.data.dl_file_link) this.cur_action.data.dl_file_link = 'file'
      }
    },
    clickAPIAction () {
      this.$emit('onSubmit', deepCopy(this.cur_action.data))
      this.settingsShow_api = false
    },
    clickPageAction () {
      this.$emit('onSubmit', deepCopy(this.cur_action.data))
      this.settingsShow_page = false
    },
    clickScriptAction () {
      this.cur_action.data.script = this.editor.getSession().getValue()
      this.$emit('onSubmit', deepCopy(this.cur_action.data))
      this.handleShowScriptClose()
    },
    clickLogicOperationAction () {
      this.$emit('onSubmit', deepCopy(this.cur_action.data))
      this.handleShowScriptClose()
    },
    clickExportAction () {
      this.$emit('onSubmit', deepCopy(this.cur_action.data))
      this.handleShowScriptClose()
    },
    getValueByKey (key) {
      switch (key) {
        case 'limit':
          return '$_limit'
        case 'page':
          return '$_page'
        default:
          return ''
      }
    }
  }
}
</script>
<style lang="scss">
.tips {
  color: #f56c6c !important;
  font: italic bold 12px/30px
}
.pop {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
#editorId {
  width:100%;
  height: 660px;
}
@media (max-width:1367px) {
  #editorId {
    height: 400px;
  }
}
</style>
